<script setup lang="ts">
import hotSale from './InfoEcharts/hotSale.vue';
import bookTypeSale from './InfoEcharts/bookTypeSale.vue';
import salesMoney from './InfoEcharts/salesMoney.vue';
import bookSaleCount from './InfoEcharts/bookSaleCount.vue';
</script>

<template>
 <div>
    <div>
        <div class="mb-2 text-2xl font-semibold position"><span>热销书籍榜 （2024年 前5名数据）</span></div>
        <hotSale/>
    </div>
    <div class="h-80 mb-12 flex justify-between items-center px-2">
        <div class="bg-white h-72 mx-1 rounded-lg hover:bg-teal-200 hover:cursor-pointer w1">
            <div class="mt-5 text-xl font-semibold"><span>热销类别占比</span></div>
            <bookTypeSale/>
        </div>
        <div class="bg-white h-72 mx-1 rounded-lg hover:bg-teal-200 hover:cursor-pointer w1">
            <div class="mt-5 text-xl font-semibold"><span>营业额（万）</span></div>
            <salesMoney/>
        </div>
        <div class="bg-white h-72 mx-1 rounded-lg hover:bg-teal-200 hover:cursor-pointer w1">
            <div class="mt-5 text-xl font-semibold"><span>书籍成交量（本）</span></div>
            <bookSaleCount/>
        </div>
    </div>
 </div>
</template>

<style scoped>
.position{
    margin-left: 30%;
}
.w1{
    width: 25%;
    display: flex;
    flex-direction: column;
    align-items: center;
}
</style>